<template>
  <article class="page page-obfuscator-decode">
    <h4 class="text-center">OB混淆解密</h4>
    <!-- <div class="tabs-bar">
      <div v-for="(v, i) in tabsList" :key="i" :class="['tab-item', { active: i === tabActiveIndex }]"
        @click="tabItemClick(i)">{{ v.label }}</div>
    </div> -->
    <div class="tab-content">
      <component :is="tabActive.component"></component>
    </div>
  </article>
</template>

<script>
import cmpObfuscatorDecode from './obfuscator-decode.vue'

export default {
  name: 'obfuscator-decode',
  components: {
    cmpObfuscatorDecode,
  },
  data () {
    return {
      tabActiveIndex: 0,
      tabsList: [
        { label: 'OBDecode', value: 'OBDecode', component: 'cmpObfuscatorDecode' },
      ],
    }
  },
  computed: {
    tabActive() {
      return this.tabsList[this.tabActiveIndex] || {}
    }
  },
  methods: {
    tabItemClick(index) {
      this.tabActiveIndex = index
    },
  }
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-obfuscator-decode {
  display: flex;
  flex-direction: column;
  .tabs-bar {
    margin-bottom: 1em;
  }

  .tab-content {
    height: 0;
    flex-grow: 1;
  }
}
</style>
